<template>
	<view v-if="show" class="boxBg" @click.stop="$emit('update:show', false)">
		<view class="popBox" :style="{width:options.popW + 'rpx'}" @click.stop>
			<view v-if="options.showTitle" class="popTitle flex_r_c_c">
				<text class="f_36 fw_600 tc_w">{{options.title}}</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="popCnt">
				<slot name="slotCnt" />
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="popCnt">
				<slot v-bind="options" />
			</view>
			<!-- #endif -->
			<view class="popFooter flex_r_c_c" @click.stop="$emit('popConfirm')">
				<text class="f_36 fw_600 tc_g">确 定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fr-custom-pop",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			options: {
				type: Object,
				default: function() {
					return {
						showTitle: true,
						title: '编 辑',
						popW: 600,
					}
				}
			},
		},
		data() {
			return {};
		}
	}
</script>

<style lang="scss" scoped>
.boxBg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:rgba(0,0,0,0.7);
	.popBox {
		// width: 600rpx;
		// height: 600rpx;
		padding-top: 32rpx;
		box-sizing: border-box;
		background-color: #2c2c2c;
		border-radius: 24rpx;
		position: fixed;
		top: 50%;
		left:50%;
		transform: translate(-50%, -50%);
		.popTitle {
			width: 100%;
			height: 60rpx;
		}
		.popCnt {
			// padding: 28rpx;
			// box-sizing: border-box;
		}
		.popFooter {
			width: 100%;
			height: 100rpx;
			// position: fixed;
			// bottom: 0;
			// left: 0;
			border-top: 2rpx solid #202020;
		}
	}
}
</style>
